<template>
  <div class="btn-wrap">
    <div class="btn-group" role="group" aria-label="Basic mixed styles example">
      <button
        type="button"
        class="btn"
        :class="active === 0 ? 'btn-primary' : ' btn-secondary'"
        @click="changeActive(0)"
      >
        全部
      </button>
      <button
        type="button"
        class="btn"
        :class="active === 1 ? 'btn-primary' : ' btn-secondary'"
        @click="changeActive(1)"
      >
        已完成
      </button>
      <button
        type="button"
        class="btn"
        :class="active === 2 ? 'btn-primary' : ' btn-secondary'"
        @click="changeActive(2)"
      >
        未完成
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  emits: ["changeList"],
  methods: {
    changeActive(index) {
      this.active = index;
      this.$emit("changeList", index);
    },
  },
};
</script>
<style scoped>
.btn-wrap {
  width: 500px;
  margin: 10px auto;
}
.btn-wrap .btn-group{
    width: 500px;
}
</style>